<template>
  <div>
    <el-button 
      type="primary" 
      icon="el-icon-arrow-left"
      @click="$router.push('/admin/user')"
      style="margin-bottom: 20px">
      返回
    </el-button>
    <el-form style="width: 60%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户ID">
        <el-input v-model="ruleForm.userid" readOnly></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password"></el-input>
      </el-form-item>

      <el-form-item label="电话" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        userid: '',
        username: '',
        password: '',
        name: '', // 保留但设为可选
        phone: '',
        email: '',
        address: '',
        role: 'user' // 添加默认角色
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],

        phone: [
          { required: true, message: '电话不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      const _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.put('http://localhost:8181/user/update', this.ruleForm).then(function(resp) {
            if (resp.data == 'success') {
              _this.$alert('用户信息修改成功！', '消息', {
                confirmButtonText: '确定',
                callback: action => {
                  _this.$router.push('/admin/user/UserManage');
                }
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {
    const _this = this;
    console.log('正在加载用户ID:', this.$route.query.userid);
    axios.get('http://localhost:8181/user/findById/' + this.$route.query.userid)
      .then(function(resp) {
        console.log('获取到用户数据:', resp.data);
        if (resp.data && resp.data.userid) {
          _this.ruleForm = {
            userid: resp.data.userid,
            username: resp.data.username,
            password: resp.data.password,
            phone: resp.data.phone,
            email: resp.data.email,
            role: resp.data.role || 'user', // 使用返回数据或默认值
            address: resp.data.address || '' // 添加地址字段
          };
        } else {
          console.error('无效的用户数据:', resp.data);
          _this.$message.error('获取用户信息失败');
          _this.$router.push('/admin/user/UserManage');
        }
      })
      .catch(error => {
        console.error('获取用户信息出错:', error);
        _this.$message.error('获取用户信息出错');
        _this.$router.push('/admin/user/UserManage');
      });
  }
};
</script>
